<template>
  <div id="app">
    <div class="topSearch" style="margin-bottom: 15px;display: flex">
      <div style="margin-right: 15px"><span>订单名称：</span>
        <el-input style="width: 200px" size="small" v-model="data.storeName"></el-input>
      </div>
      <div style="margin-right: 15px"><span>创建人：</span>
        <el-input style="width: 200px" size="small" v-model="data.launchUserName"></el-input>
      </div>
      <div style="margin-right: 15px"><span>售后类型：</span>
        <el-select v-model="data.afterSaleType" style="width: 200px" size="small" clearable>
          <el-option v-for="item in afterType" :value="item.afterTypeId" :label="item.afterTypeName"
                     :key="item.afterTypeId"></el-option>
        </el-select>
      </div>
      <div class="search" style="margin-bottom: 10px">品牌：
        <el-select size="small" v-model="data.brandPartyId" filterable>
          <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                     :key="item.id"></el-option>
        </el-select>
      </div>
      <!--      <div style="margin-right: 15px"><span>创建时间：</span>-->
      <!--        <el-input style="width: 200px" size="small"></el-input>-->
      <!--      </div>-->
      <div>
        <el-button size="small" style="background:#303e9d;color: #FFFFFF" @click="search"
                   icon="el-icon-search">
          搜索
        </el-button>
        <el-button size="small" style="background:#303e9d;color: #FFFFFF" icon="el-icon-refresh" @click="reset">重置
        </el-button>
      </div>

    </div>
    <el-table :data="afterData" height="calc(100vh - 250px)"
              border stripe :cell-style="{ 'textAlign': 'center' }"
              :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="110px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="assignName" label="店铺名称" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="customerName" label="发起人"></el-table-column>
      <el-table-column prop="projectUserName" label="项目经理"></el-table-column>
      <el-table-column prop="afterProblem" label="售后原因" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="afterType" label="售后类型" width="150px" show-overflow-tooltip></el-table-column>
      <el-table-column label="售后图片">
        <template slot-scope="scope">
          <el-image v-if="scope.row.afterProblemImg" v-for="item in scope.row.afterProblemImg" :src="'https://'+item"
                    :preview-src-list="scope.row.afterProblemImg.map(img=>'https://'+img)"
                    :key="item"
                    style="width: 50px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="售后人员" prop="afterName" width="110px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" label="收货地址" width="180px" show-overflow-tooltip></el-table-column>
      <el-table-column label="状态" width="80px">
        <template slot-scope="scope">
          <span v-if="scope.row.state==0">未开始</span>
          <span v-if="scope.row.state==1">进行中</span>
          <span v-if="scope.row.state==2">已完成</span>
          <span v-if="scope.row.state==3">已逾期</span>
          <span v-if="scope.row.state==4">已审核</span>
        </template>
      </el-table-column>
      <el-table-column prop="remainingTime" label="售后完结时间" width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="afterCompletion" label="售后完结备注"></el-table-column>
      <el-table-column prop="overPictrue" label="售后完结图片">
        <template slot-scope="scope">
          <el-image v-for="item in scope.row.afterCompletionImgList" :src="'https://'+item"
                    :preview-src-list="['https://'+item]"
                    :key="item"
                    style="width: 50px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link style="margin-right: 10px;color: #303e9d" @click="finish(scope.row)"
                   v-if="(scope.row.state == 2 || scope.row.state == 3) && !scope.row.afterCompletionImg && !scope.row.afterCompletion"
          >确认完结
          </el-link>
          <el-link style="color: #303e9d" @click="deleteData(scope.row)" v-if="authorityList.includes(701)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        align="center"
        style="padding: 30px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.pageNumber"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="data.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
    >
    </el-pagination>
    <el-dialog :close-on-click-modal="false" :visible.sync="afterSaleInfo" width="30%" title="填写售后信息"
               v-if="afterSaleInfo">
      <!--        <div style="display: flex;align-items: center">-->
      <!--          <div style="width:80px;text-align: center;">售后人员：</div>-->
      <!--          <el-input placeholder="请填写售后人员姓名" v-model="orderInfo.afterSales" size="small" style="width: 80%"></el-input>-->
      <!--        </div>-->
      <div style="display: flex;align-items: center">
        <div style="width:80px;text-align: center;">完结备注：</div>
        <el-input type="textarea" v-model="finishRemark" size="small" style="width: 80%"></el-input>
      </div>
      <div style="width:80px;text-align: center;margin-top: 15px">凭证：</div>
      <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>
      <div class="div" style="display: flex;align-items: center">


        <div v-for='(v, i) in finishImg' style="display: flex;align-items: center;margin-right: 10px;">
          <el-image :key="i" style="width: 50px; height: 50px"
                    ref="preview" :src="'https://'+v" :preview-src-list="['https://'+v]">
          </el-image>
          <div @click="deletePic(i)">
            <el-icon name="delete"></el-icon>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="afterSaleInfo = false">取 消</el-button>
    <el-button type="primary" @click="confirmInfo">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
import {MessageBox} from "element-ui";
import quinn from "../../utils/quinn";

export default {
  name: "afterSales",
  meta: {title: "售后列表", icon: "el-icon-receiving", authorityList: 700, sort: 9},
  data() {
    return {
      afterData: [],
      brandList: [],
      data: {
        pageSize: 20,
        pageNumber: 1,
        orderName: "",
        launchUserName: "",
        afterSaleType: "",
        brandPartyId: '',
      },
      total: "",
      totalCount: 0,
      afterSaleInfo: false,
      orderInfo: {},
      finishImg: [],
      afterId: "",
      finishRemark: "",
      afterType: [],
      authorityList: [],
    }
  },
  created() {
    this.getBrand()
    const {authorityList = []} = quinn.getStorage("userDatav3") || store.state.userData || {};
    this.authorityList = authorityList
    document.addEventListener('paste', this.handlePaste)
    this.$api.pcAfterSaleGetAfterSaleType().then(res => {
      this.afterType = res
    })
  },
  methods: {
    search() {
      this.data.pageNumber = 1
      this.getAftersaleList()
    },
    reset() {
      this.data = this.$options.data.call(this).data
      this.getAftersaleList()
    },
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.data.brandPartyId = res[0].id
        this.getAftersaleList()
      })
    },
    getAftersaleList() {
      const data = this.data
      this.$api.afterGetAssignTaskAfterVo(data).then(res => {
        res.data.map(a => {
          if (a.afterCompletionImg && a.afterCompletionImg.includes(",")) {
            a.afterCompletionImgList = a.afterCompletionImg.split(",");
          } else if (!a.afterCompletionImg) {
            a.afterCompletionImgList = []
          } else {
            a.afterCompletionImgList = [a.afterCompletionImg];
          }
        })
        this.afterData = res.data
        this.totalCount = res.total
      })
    },
    confirmInfo() {
      const data = {
        afterId: this.afterId,
        afterCompletion: this.finishRemark,
        afterCompletionImg: this.finishImg
      }
      this.$api.afterUpdateAfterConfirmCompletion(data).then(res => {
        if (res == 1) {
          this.$message.success('操作成功！')
          this.afterSaleInfo = false
          this.getAftersaleList()
        }
      })
    },
    deletePic(i) {
      this.finishImg.splice(i, 1)
    },
    handlePaste(event) {
      if (!this.afterSaleInfo) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/img/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      })
          .then(response => {
            this.finishImg.push(response.data.result[0]);
          })
          .catch(error => {
          });
    },
    finish(row) {
      this.afterId = row.afterId
      this.afterSaleInfo = true
      this.finishRemark = ""
      this.finishImg = []
    },
    deleteData(row) {
      MessageBox.alert(
          `确认删除: ${row.storeName}?`,
          '删除信息',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
            callback: action => {
              if (action === 'confirm') {
                this.$api.pcAfterSaleDeleteAfterSale({afterId: row.afterId}).then(res => {
                  if (res === 1) {
                    this.$message.success("删除成功！");
                    this.getAftersaleList();
                  } else {
                    this.$message.error("删除失败！");
                  }
                }).catch(error => {
                  this.$message.error("删除请求失败：" + error);
                });
              }
            }
          }
      );
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getStoreList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getStoreList()
    },
  }
}
</script>

<style scoped>
@import '../../assets/css/public.css';
</style>